<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<meta name="baidu-site-verification" content="oF1sFvESVA" />
		<meta name="baidu_union_verify" content="bda7674d0ccf3504162798d150953709">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" th:href="@{/libs/bootstrap/bootstrap.min.css}"/>
		<link rel="stylesheet" th:href="@{/libs/swiper/css/swiper.min.css}"/>
		<link rel="stylesheet" th:href="@{/libs/zplayer/css/zplayer.min.css}"/>
		<link rel="stylesheet" th:href="@{/libs/font-icon/icon.css}"/>
		<link rel="stylesheet" th:href="@{/libs/theme/pblog/css/web-common.css}" />
		<link rel="stylesheet" th:href="@{/libs/theme/pblog/css/web-blog.css}" />
		<link rel="stylesheet" th:href="@{/libs/adminlte/css/AdminLTE.min.css}"/>
		<script th:inline="javascript">var ctx = [[@{/}]];</script>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/libs/bootstrap/bootstrap.min.js}"></script>
		<script th:src="@{/libs/swiper/js/swiper.min.js}"></script>
		<script th:src="@{/js/hc-sticky.js}" ></script>
		<script th:src="@{/libs/zplayer/js/zplayer.min.js}"></script>
		<script th:src="@{/libs/theme/pblog/js/pb-blog.js}"></script>
		<script th:src="@{/js/core.js}"></script>
		<script th:src="@{/libs/layer/layer.js}"></script>
		<script th:src="@{/libs/iCheck/icheck.min.js}"></script>
		<script th:src="@{/libs/validate/validate.js}"></script>
	</head>
	<body>
		<header id="header">
			<div th:replace="home/fragments/navbar :: navbar"></div>
		</header>
		<div class="pb-container pb-content">
			<div class="pb-sidebar">
				<div class="tag panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">美食分类</h3>
					</div>
					<div class="panel-body">
						<ul>
							<li th:each="item:${@module.get('categoryList')}" class="tag-li"><a class="btn btn-default btn-xs" th:href="@{${'/food/category/'+item.id}}" th:text="${item.name}"></a></li>
						</ul>
					</div>
				</div>
				<div class="tag panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">美食标签</h3>
					</div>
					<div class="panel-body">
						<ul>
							<li th:each="item:${@module.get('tagList')}" class="tag-li"><a class="btn btn-default btn-xs" th:href="@{${'/food/tag/'+item.id}}" th:text="${item.name}"></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="pb-main">
				<div class="no-article-content" th:if="${#lists.isEmpty(foodList)}">
					Sorry, 暂未发现任何菜单~
				</div>
				<div th:each="item,temp : ${foodList}" class="blogs">
				  <!--<span th:if="${item.top==1}" class="fa fa-superscript-top superscript superscript-top"></span>-->
			      <span class="blogpic"><a><img th:src="${item.coverImage}" th:alt="${item.coverImage}"></a><span class="blog-type"><a th:href="@{${'/food/category/'+item.categoryId}}" th:text="${item.bizCategory.name}"></a></span></span>
				  <h3 class="blogtitle"><a th:href="@{${'/food/'+item.id}}" th:text="${item.name}" ></a></h3>
			      <p  th:text="${item.description}" class="blogtext"></p>
			      <div class="bloginfo">
			        <ul>
			          <li>
						  <span class="price" th:text="${item.price}"></span>
						  <span class="price">元</span>
					  </li>
			        </ul>
					<a class="read-more join" th:attr="id=${item.id},name=${item.name},price=${item.price}">加入订单</a>
					  <!--<button type="button" class="btn btn-default read-more">加入订单</button>-->
			      </div>
			    </div>
				<div th:replace="home/fragments/pagebar :: pagebar"></div>

			</div>
			<div th:replace="home/fragments/sidebar :: sidebar"></div>
		</div>
		<div class="return_top"><a class=" fa fa-arrow-up"></a></div>

		<script type="text/javascript">
			var orderInfo = [];

			var addressList = []

			var address = null;

			loadAddress()

			function addOrderInfo(item){
				var exist = false;
				for(var i=0;i<orderInfo.length;i++){
					if (orderInfo[i].id == item.id){
						orderInfo[i].num = orderInfo[i].num+1
                        exist = true
					}
				}
				if (!exist){
				    item.num = 1;
				    orderInfo.push(item)
				}
				loadOrder()
            }

            function deleteOrderInfo(id) {
				for(var i=0;i<orderInfo.length;i++){
					if (orderInfo[i].id == id){
						if (orderInfo[i].num > 1){
							orderInfo[i].num = orderInfo[i].num-1
						}else{
							orderInfo.splice(i,1)
						}
					}

				}

				loadOrder()
			}

            function loadOrder(){
				var totalMoney = 0;
				var htmlContent = "";
				for (var i=0;i<orderInfo.length;i++){
					var order = orderInfo[i];
					var content = "<li class='order'><div class='blogs' ><h3 class=\"blogtitle\">";
					content = content+order.name+"</h3><span>"+order.num+"份</span><div class=\"bloginfo\"><ul><li>";
					content = content+"<span class=\"price\" >"+order.price+"</span>";
					content = content+"<span class=\"price\">元</span></li></ul>";
					content = content+"<a class='read-more deleteShopping' onclick='deleteOrderInfo("+order.id+")' data-id="+order.id+">删除订单</a>";
					content = content + "</div></div></li>";
					htmlContent = htmlContent+content;

					totalMoney = totalMoney+parseFloat(order.price)*order.num;
				}
				$("#orderList").html(htmlContent);
				$("#totalMoney").text(totalMoney.toFixed(2))
			}

			$(".join").click(function () {
				var id = $(this).attr("id")
                var name = $(this).attr("name")
                var price = $(this).attr("price")
				var item = {
					"id":id,"name":name,"price":price
				}
				addOrderInfo(item)
            })

			$("#createOrder").click(function () {

				var data = {
					"address":address,
					"orderInfo":orderInfo
				}
				$.ajax({
					type: "POST",
					url: (ctx + "/order/create").replace('//', '/'),
                    contentType:'application/json;charset=UTF-8',
                    data:JSON.stringify(data),
					dataType: "json",

					success: function (data) {
						if (data.status == 200) {
							layer.msg(data.msg, {
								offset: '30%',
								time: 800
							});
							orderInfo = []
							loadOrder()
						}else{
							layer.msg(data.msg, {
								icon: 2,
								offset: '30%',
								time: 2000
							});

						}
					}
				});
			})



			function loadAddress() {
				Core.postAjax("/address/myAddress",null,function(data){
					if(data.status==200){
						addressList = data.data;
						if (addressList == null || addressList.length==0){
							$("#address").hide();
							$("#noAddress").show();
						}else{
							$("#noAddress").hide();
							address = addressList[0];
							$("#name").text(address.name)
							$("#phone").text(address.phone)
							$("#description").text(address.description)
							$("#address").show();
						}
					}else{
						layer.msg(data.msg);
					}
				})
			}

			$("#openAddress").on('click',function () {
                $("#addressList").html("")
                for(var i=0;i<addressList.length;i++){
					var content = "<li class='addressContent'><div class=\"radio radioSelect\"><label>" +
						"<input type=\"radio\" class=\"radio\" name=\"optionsRadios\"  value="+addressList[i].id+">"
                	+addressList[i].name+"</label></div><span class=\"phone\">"+addressList[i].phone+"</span>"
					+"<p class=\"description\">"+addressList[i].description+"</p></li>"
					$("#addressList").append(content)
                }
            })

			$("#selectAddress").on('click',function () {
				$('#addressListModal').modal('hide');
				var id = $(".radio:checked").val();
				for(var i=0;i<addressList.length;i++){
					if (addressList[i].id == id){
						var address = addressList[i];
						$("#name").text(address.name)
						$("#phone").text(address.phone)
						$("#description").text(address.description)
						break
					}
				}
			})



		</script>
	</body>





</html>